<template>
  <div class="h-100 ">
    <!-- 监测 开始 -->
    <div class="h-89  " style="top:11.3%;margin-top:2vh">
      <div style="width:20%;height:100%;" class="f-l navLeft">
        <!-- 监测 结束 -->

        <div class="card bg on" style="width:100%" @click="goBack">
          <img src="~@/assets/img/left.png" style="vertical-align: middle; padding-bottom:6px" alt=""> <span data-index="0" class="myfont">全部数据指标 </span>
        </div>
        <div class="navs" @click="changeNav">

          <div v-for="item in itemlist" :key="item.code" class="card " :class="typeCode == item.code? 'on':''">
            <p :data-index="item.code">{{ item.name }}</p>
          </div>
        </div>
      </div>
      <div class="chart-box f-r" style="width:78%;height:100%; ">
        <div class="title">{{ currentItem.name }}</div>

        <div class="chart" :class="{'on' : typeCode==1}">
          <v-chart v-if="typeCode <= 6 && option1.isShow" :options="option1" style="width:80%;" />
          <v-chart v-if="typeCode >6 && typeCode<=10 && option2.isShow" :options="option2" style="width:80%" />
          <v-chart v-if="typeCode >10 && option3.isShow" :options="option3" style="width:100%" />

        </div>

      </div>

    </div>
  </div>
</template>

<script>
import echarts from 'echarts'
import { sheepInfo, getEchartsDataS, getEchartsDataS2 } from '@/api/connector'
import { getDataAndRefresh } from '@/utils/echartsRefresh'
// code: 1-6 饼图   7-10 柱状图   11-13 折线图
export default {
  name: 'LeverInfo',
  data() {
    return {
      typeCode: 1,
      itemlist: [
        { name: '世界奶山羊主要养殖地区存栏量分布', code: 1, type: 'MAJOR_BREEDING_BASES_IN_THE_WORLD' },
        { name: '世界奶山羊主要养殖地区产奶量分布', code: 2, type: 'MAJOR_BREEDING_BASES_IN_THE_WORLD' },
        { name: '全国奶山羊主要养殖地区存栏量分布', code: 3, type: 'MAIN_BREEDING_AREAS_OF_DAIRY_GOATS_IN_CHINA' },
        { name: '全国奶山羊主要养殖地区产奶量分布', code: 4, type: 'MAIN_BREEDING_AREAS_OF_DAIRY_GOATS_IN_CHINA' },
        { name: '陕西省奶山羊主要养殖地区存栏量分布', code: 5, type: 'MAIN_BREEDING_AREAS_OF_DAIRY_GOATS_IN_SHAANXI' },
        { name: '陕西省奶山羊主要养殖地区产奶量分布', code: 6, type: 'MAIN_BREEDING_AREAS_OF_DAIRY_GOATS_IN_SHAANXI' },
        { name: '中国奶山羊主要养殖基地县存栏量', code: 7, type: 'MAJOR_BREEDING_BASES_IN_CHINA' },
        { name: '中国奶山羊主要养殖基地县产奶羊存栏量', code: 8, type: 'MAJOR_BREEDING_BASES_IN_CHINA' },
        { name: '中国奶山羊主要养殖基地县产奶量', code: 9, type: 'MAJOR_BREEDING_BASES_IN_CHINA' },
        { name: '中国奶山羊主要养殖基地县单产量', code: 10, type: 'MAJOR_BREEDING_BASES_IN_CHINA' },
        { name: '陕西省奶山羊主要养殖基地县存栏量历年数据', code: 11, type: 'MAJOR_BREEDING_BASES_IN_SHAANXI' },
        { name: '陕西省奶山羊主要养殖基地县产奶羊存栏量历年数据', code: 12, type: 'MAJOR_BREEDING_BASES_IN_SHAANXI' },
        { name: '陕西省奶山羊主要养殖基地县产奶量历年数据', code: 13, type: 'MAJOR_BREEDING_BASES_IN_SHAANXI' }

      ],
      option1: {
        isShow: false,
        legend: {
          orient: 'vertical',
          y: 'center', // 可设定图例在上、下、居中
          padding: [30, 150, 0, 0], // 可设定图例[距上方距离，距右方距离，距下方距离，距左方距离]
          itemGap: 50,
          textStyle: {
            fontSize: 14
          },
          right: '1%'
        },
        grid: {
          x: 80,
          y: 80,
          x2: 500,
          y2: 600,
          containLabel: true
        },
        tooltip: {
          trigger: 'item'

        },

        series: [
          {
            name: '',
            type: 'pie',
            radius: ['75%', '85%'],
            center: ['40%', '55%'],
            avoidLabelOverlap: false,

            label: {
              alignTo: 'labelLine',
              padding: [0, -85],
              formatter: (params) => {
                return params.percent + '%' + '  \n\n'
              },
              color: '#fff',
              fontWeight: 500,
              fontSize: 24

            },
            labelLine: {
              length2: 100
            },
            data: []
          }
        ]
      },
      option2: {
        isShow: false,
        tooltip: {
          trigger: 'axis',
          axisPointer: {
            type: 'cross'
          }
        },
        xAxis: [
          {
            type: 'category',
            data: [],
            axisLine: {
              lineStyle: {
                color: '#485A6A',
                width: 1
              }
            }
          }
        ],
        yAxis: [
          {
            name: '万只',
            axisLine: {
              lineStyle: {
                color: '#485A6A'
              }
            },
            splitLine: {
              show: true,
              lineStyle: {
                color: ['#364C5B'],
                width: 1,
                type: 'solid'
              }
            },
            nameTextStyle: {
              color: '#ffffff'
            }
          }
        ],
        grid: {
          left: '3%',
          right: '4%',
          bottom: '3%',
          containLabel: true
        },
        series: [
          {
            name: '',
            type: 'bar',
            barMaxWidth: 25,
            itemStyle: {
              color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
                { offset: 0, color: 'rgba(24, 216, 177, 1)' },
                { offset: 1, color: 'rgba(24, 216, 177, 0)' }
              ])
            },
            data: []
          }

        ]
      },
      option3: {
        isShow: false,
        grid: {
          x: 90,
          right: 90
        },
        legend: {
          itemWidth: 30,
          data: [],
          x: '68%'
        },
        tooltip: {
          trigger: 'axis'
        },
        xAxis: {
          type: 'category',
          axisLine: {
            lineStyle: {
              color: '#485A6A'
            }
          },
          data: []
        },
        yAxis: [

          {
            name: '万只',
            axisLine: {
              lineStyle: {
                color: '#485A6A'
              }
            },
            splitLine: {
              show: true,
              lineStyle: {
                color: ['#364C5B'],
                width: 1,
                type: 'solid'
              }
            },
            nameTextStyle: {
              color: '#ffffff'
            }
          }
        ],
        series: []
      }
    }
  },
  computed: {
    currentItem() {
      return this.itemlist.find(item => item.code === this.typeCode)
    }
  },
  created() {
    this.getData()
    // this.timer = getDataAndRefresh(this.getData)
  },
  destroyed() {
    clearInterval(this.timer)
  },
  methods: {
    // 侧边导航点击
    changeNav(e) {
      const index = Number(e.target.dataset.index)
      this.typeCode = index
      this.getData()
    },
    getData() {
      // if (this.currentItem.code === 1 || this.currentItem.code === 2) {

      // }
      if (this.currentItem.code <= 10) {
        getEchartsDataS2(this.currentItem.type).then(res => {
          if (res.status === 0) {
            const datas = res.data.rows
            this[`modify${this.currentItem.code}`](datas)
          }
        })
      } else if (this.currentItem.code > 6 && this.currentItem.code <= 10) {
        getEchartsDataS(this.currentItem.type).then(res => {
          if (res.status === 0) {
            const datas = res.data.rows
            this[`modify${this.currentItem.code}`](datas)
          }
        })
      } else {
        const data = {
          page: 1,
          perPage: 5,
          orderBy: 'dataDate',
          orderDir: 'desc',
          dataType: this.currentItem.type
        }
        data.detailFlag = 1
        sheepInfo(data).then(res => {
          if (res.status === 0) {
            const datas = res.data.rows
            this[`modify${this.currentItem.code}`](datas)
          }
        })
      }

      // for (let i = 1; i < 5; i++) {
      //   this[`option${i}`].isShow = false
      // }
    },
    // option1
    modify1(datas) {
      const newData = datas.map((item, index) => ({
        value: item.c_1,
        name: item.name,
        dataDateStr: item.dataDateStr
      }))
      this.option1.series[0].data = newData
      this.option1.isShow = true
      this.option1.series[0].name = this.currentItem.name
    },
    // option1
    modify2(datas) {
      const newData = datas.map((item, index) => ({
        value: item.c_2,
        name: item.name,
        dataDateStr: item.dataDateStr
      }))
      this.option1.series[0].data = newData
      this.option1.isShow = true
      this.option1.series[0].name = this.currentItem.name
    },
    // option1
    modify3(datas) {
      const newData = datas.map((item, index) => ({
        value: item.c_1,
        name: item.name,
        dataDateStr: item.dataDateStr
      }))
      this.option1.series[0].data = newData
      this.option1.isShow = true
      this.option1.series[0].name = this.currentItem.name
    },
    // option1
    modify4(datas) {
      const newData = datas.map((item, index) => ({
        value: item.c_2,
        name: item.name,
        dataDateStr: item.dataDateStr
      }))
      this.option1.series[0].data = newData
      this.option1.isShow = true
      this.option1.series[0].name = this.currentItem.name
    },
    // option1
    modify5(datas) {
      const newData = datas.map((item, index) => ({
        value: item.c_1,
        name: item.name,
        dataDateStr: item.dataDateStr
      }))
      this.option1.series[0].data = newData
      this.option1.isShow = true
      this.option1.series[0].name = this.currentItem.name
    },
    // option1
    modify6(datas) {
      const newData = datas.map((item, index) => ({
        value: item.c_2,
        name: item.name,
        dataDateStr: item.dataDateStr
      }))
      this.option1.series[0].data = newData
      this.option1.isShow = true
      this.option1.series[0].name = this.currentItem.name
    },
    // option2
    modify7(datas) {
      const newData2 = datas.map((item, index) => ({
        value: item.c_1
      }))
      const xData = datas.map(item => {
        return item.name
      })
      this.option2.xAxis[0].data = xData
      this.option2.series[0].data = newData2
      this.option2.isShow = true
      this.option2.series[0].name = '存栏量'
      this.option2.yAxis[0].name = '万只'
    },
    modify8(datas) {
      const newData2 = datas.map((item, index) => ({
        value: item.c_2
      }))
      const xData = datas.map(item => {
        return item.name
      })
      this.option2.xAxis[0].data = xData
      this.option2.series[0].data = newData2
      this.option2.isShow = true
      this.option2.series[0].name = '产奶羊存栏量'
      this.option2.yAxis[0].name = '万只'
    },
    modify9(datas) {
      const newData2 = datas.map((item, index) => ({
        value: item.c_3
      }))
      const xData = datas.map(item => {
        return item.name
      })
      this.option2.xAxis[0].data = xData
      this.option2.series[0].data = newData2
      this.option2.isShow = true
      this.option2.series[0].name = '产奶量'
      this.option2.yAxis[0].name = '万吨'
    },
    modify10(datas) {
      const newData2 = datas.map((item, index) => ({
        value: item.c_4
      }))
      const xData = datas.map(item => {
        return item.name
      })
      this.option2.xAxis[0].data = xData
      this.option2.series[0].data = newData2
      this.option2.isShow = true
      this.option2.series[0].name = '单产量'
      this.option2.yAxis[0].name = '千克'
    },
    // option3
    modify11(datas) {
      const xData = datas.map(item => {
        return item.dataDateStr
      })
      this.option3.xAxis.data = xData
      const yData = []

      for (let i = 0; i < datas[0].commonStatisticsDetailModelList.length; i++) {
        const yObj = {
          type: 'line',
          smooth: false,
          symbolSize: 8,
          symbol: 'emptyCircle',
          name: ''
        }
        yObj.data = []

        yData.push(yObj)
      }
      const arrAll = []
      yData.forEach((ele, index) => {
        const arr1 = []
        datas.forEach((ele2, index2) => {
          ele.data.push(ele2.commonStatisticsDetailModelList[index].c_1)
        })
        arrAll.push(arr1)
      })
      let lData = []
      lData = datas[0].commonStatisticsDetailModelList.map(ele => {
        return ele.name
      })
      for (let i = 0; i < lData.length; i++) {
        yData[i]['name'] = lData[i]
      }
      this.option3.series = yData
      this.option3.legend.data = lData
      this.option3.isShow = true
      this.option3.yAxis[0].name = '万只'
    },
    // option3
    modify12(datas) {
      const xData = datas.map(item => {
        return item.dataDateStr
      })
      this.option3.xAxis.data = xData
      const yData = []

      for (let i = 0; i < datas[0].commonStatisticsDetailModelList.length; i++) {
        const yObj = {
          type: 'line',
          smooth: false,
          symbolSize: 8,
          symbol: 'emptyCircle',
          name: ''
        }
        yObj.data = []

        yData.push(yObj)
      }
      const arrAll = []
      yData.forEach((ele, index) => {
        const arr1 = []
        datas.forEach((ele2, index2) => {
          ele.data.push(ele2.commonStatisticsDetailModelList[index].c_2)
        })
        arrAll.push(arr1)
      })
      let lData = []
      lData = datas[0].commonStatisticsDetailModelList.map(ele => {
        return ele.name
      })
      for (let i = 0; i < lData.length; i++) {
        yData[i]['name'] = lData[i]
      }
      this.option3.series = yData
      this.option3.legend.data = lData
      this.option3.isShow = true
      this.option3.yAxis[0].name = '万只'
    },
    // option3
    modify13(datas) {
      const xData = datas.map(item => {
        return item.dataDateStr
      })
      this.option3.xAxis.data = xData
      const yData = []

      for (let i = 0; i < datas[0].commonStatisticsDetailModelList.length; i++) {
        const yObj = {
          type: 'line',
          smooth: false,
          symbolSize: 8,
          symbol: 'emptyCircle',
          name: ''
        }
        yObj.data = []

        yData.push(yObj)
      }
      const arrAll = []
      yData.forEach((ele, index) => {
        const arr1 = []
        datas.forEach((ele2, index2) => {
          ele.data.push(ele2.commonStatisticsDetailModelList[index].c_3)
        })
        arrAll.push(arr1)
      })
      let lData = []
      lData = datas[0].commonStatisticsDetailModelList.map(ele => {
        return ele.name
      })
      for (let i = 0; i < lData.length; i++) {
        yData[i]['name'] = lData[i]
      }
      this.option3.series = yData
      this.option3.legend.data = lData
      this.option3.isShow = true
      this.option3.yAxis[0].name = '万吨'
    },

    goBack() {
      this.$router.go(-1)
    }
  }
}
</script>

<style lang="scss" scoped>
.navs{

  overflow-y: auto;
}
.navs::-webkit-scrollbar {
  display: none; /* Chrome Safari */
}
.navs{
  border: 1px solid #2E5675;
  height: calc(100% - 80px);
}
.popUp{
  width: 100vw;
  height: 100vh;
  background-color: rgba(0,0,0,0.6);
  position: fixed;
  left: 0;
  top: 0;
  display: flex;
  align-items: center;
  justify-content: center;
}
.kong{
  width: 100%;
  display: flex;
  padding: 0 25px;
  box-sizing: border-box;
  align-items: center;
  justify-content: space-between;
  padding-bottom: 20px;
  .video{
      width: 49%;
      height: 320px;
    img{
      width: 100%;
      height: 100%;
    }
  }
}
.tabs{
    align-items: center;
    padding:0 2%;
    box-sizing: border-box;
    justify-content: space-around;
  }
.tab{
  align-items: center;
  height: 64px;
  display: flex;
  justify-content: space-between;
  align-items: center;

  img{
    width: 34px;
    height: 34px;
    margin-right: 18px;
  }

  .tab-html{
    display: flex;
    height: 100%;
    flex-direction: column;
    justify-content: space-between;
    padding: 3px 0;
    box-sizing: border-box;
    div{
      span{
        margin-right: 10px;
      }
      small{
        font-size: 14px;
        height: 25px;
        color: #BCDDF2;
      }
    }
    div:last-child{
      display: flex;
        align-items: flex-end;
         color: #3CB5FF;
      line-height: 34px;
      text-shadow: 0px 1px 12px rgba(6, 80, 184, 0.41);
      background: linear-gradient(180deg, #FFFFFF 0%, #3CB5FF 100%);
        -webkit-background-clip: text;
        font-size: 32px;
      font-family: PingFangSC-Medium, PingFang SC;
      font-weight: 600;
      -webkit-text-fill-color: transparent;
    }
    div:first-child{

      color: #E9F7FF;
      font-size: 14px;
    }
  }
}
.tiao{
  width: 2px;
height: 64px;
background: linear-gradient(180deg, rgba(56, 123, 164, 0) 0%, #387BA4 51%, rgba(56, 123, 164, 0) 100%);
}
div[data-bottom] {
   background: url(~@/assets/img/top-img/children-bg.png) no-repeat;
  background-size: 100% 100%;

}
.boxbg {
  background: url(~@/assets/img/customer-bg.png) no-repeat;
  background-size: 100% 100% !important;
}
.timer {
  width: 240px;
  height: 40px;
  color: #ffffff;
  position: relative;
  img {
    width: 24px;
    height: 24px;
    margin-left: 40px;
    cursor:pointer;
    position: absolute;
    right: 12px;
    top: 50%;
    margin-top: -12px;
  }
}

.flex-center{
  justify-content: center;
  align-items: center;
}
.item-list {
  // max-height: 86.4%;
  border: 1px solid #155277;
  overflow: auto;
  scroll-behavior: smooth;
}

.item-list::-webkit-scrollbar {
  /*滚动条整体样式*/
  width: 10px; /*高宽分别对应横竖滚动条的尺寸*/
  height: 1px;
}
.item-list::-webkit-scrollbar-thumb {
  /*滚动条里面小方块*/
  border-radius: 10px;
  background-color: #4e5b65;
  // background-image: -webkit-linear-gradient(
  //   45deg,
  //   rgba(255, 255, 255, 0.2) 25%,
  //   transparent 25%,
  //   transparent 50%,
  //   rgba(255, 255, 255, 0.2) 50%,
  //   rgba(255, 255, 255, 0.2) 75%,
  //   transparent 75%,
  //   transparent
  // );
}
.item-list::-webkit-scrollbar-track {
  /*滚动条里面轨道*/
  box-shadow: inset 0 0 5px rgba(0, 0, 0, 0.2);
  // background: #1a5a7d;
  border-radius: 10px;
}
.h-89{
  height: 85vh;
  position: absolute;
  width: 98vw;
  top: 13%;
}
.item {
  border-bottom: 1px solid #155277;
  background: rgba(19, 34, 53, 0.8);
}

.checked {
  background: #192f4b;
  border: solid 1px #155277;
}

.app-container {
  width: 100%;
  height: 100%;
}
.echarts {
  width: 100%;
  height: 100%;
}
.charts{
  display: flex;
  align-items: center;
  justify-content: space-around;
}
.chart{
  width: 100%;
  height: 100%;
}
.chart.on{
  height: 85%;
}
.chart-box {
  display: flex;
  flex-direction: column;
  margin-left: 2%;
  box-sizing: border-box;
}

.item-list .item {
  width: 100%;
  text-align: center;
  height: 68px;
  line-height: 68px;
  color: #fff;
}
.title {
  font-size: 20px;
  font-weight: 500;
  padding: 26px 0 0 10px;
  box-sizing: border-box;
  font-family: PingFangSC-Medium, PingFang SC;
  font-weight: 500;
  color: #FFFFFF;
}

.myfont {
  font-family: myfont;
  font-size: 24px;
  background-image: -webkit-linear-gradient(bottom, #082942, #dff5fe, #ffffff);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  z-index: 999;
}
.f-l {
  float: left;
}
.f-r {
  float: right;
  border: 2px solid;
border-image: linear-gradient(277deg, rgba(43, 114, 158, 0.15), rgba(65, 139, 184, 1), rgba(21, 82, 119, 0.13)) 2 2;
}

.card {
  height: 80px;
  line-height: 80px;
  text-align: center;
  font-family: myfont;
  border-top: 1px solid  #2D5473;
  border-bottom: 1px solid  #2D5473;
  // position: relative;
  color: rgba(255,255,255,0.5);
  p{
    font-size: 16px;
font-family: PingFangSC-Medium, PingFang SC;
font-weight: 500;
  }
}
.card.on{
  background: #17354D;
  color: rgba(255, 255, 255, 1);
border-image: linear-gradient(90deg, rgba(60, 181, 255, 0), rgba(60, 181, 255, 1), rgba(60, 181, 255, 0)) 2 2;
}
.card.bg{
   background: url(~@/assets/img/card.png) no-repeat;
  background-size: 100% 100% !important;
  border: none;
}
</style>
